import {messages} from "share/common";
import React, { Component } from 'react';
import { Menu, Dropdown, Icon } from 'antd';
import 'styles/expense/expense-list.scss';
import Approved from 'images/expense-detail/approved.svg';
import Condition from 'components/condition';

const { If } = Condition;

class ExpenseList extends Component {
  static contextTypes = {
    nowExpenseDataSource: React.PropTypes.array,
    currentExpense: React.PropTypes.object,
    expenseReportInvoices: React.PropTypes.array
  };

  constructor(props, context) {
    super(props, context);
    this.menuMap = {
      'all': messages('common.all')/*全部*/,
      'false': messages('expense-1.key734')/*未审核*/,
      'true': messages('expense-1.key693')/*已审核*/
    };
  }

  handleClick = (e) => {
    this.props.changTab(e.key)
  };

  render() {
    const { currentExpense: { invoiceOID }, nowExpenseDataSource } = this.context;
    const { approvedKeys, auditTab } = this.props;
    const menuList = [{
      name: messages('common.all')/*全部*/,
      key: 'all'
    }];

    const ids = Object.keys(approvedKeys);
    ids.some(item => approvedKeys[item]) && menuList.push({ name: messages('expense-1.key693')/*已审核*/, key: 'true' });
    ids.some(item => !approvedKeys[item]) && menuList.push({ name: messages('expense-1.key734')/*未审核*/, key: 'false' });

    return (
      <section className="expense-list">
        <Dropdown
          overlay={
            <Menu onClick={this.handleClick}>
              {
                menuList.map(m => <Menu.Item key={m.key}><span> {m.name}</span></Menu.Item>)
              }
            </Menu>
          }>
          <div className="expense-list-menu" onClick={e => e.preventDefault()}>
            {this.menuMap[auditTab]} <Icon type="down" />
          </div>
        </Dropdown>
        {
          nowExpenseDataSource.map(item => (
            <div
              className={`expense-list-item-content ${item.invoiceOID === invoiceOID && 'active'}`}
              onClick={() => this.props.getDesignationExpense(item.invoiceOID)}
            >
              <div className="expense-list-item-title">
                <div className="expense-list-item-title__div">{item.expenseTypeName}</div>
                <If value={this.props.approvedKeys[item.invoiceOID]}>
                  <img src={Approved} alt={'approved'} className="expense-list-item-icon"/>
                </If>
              </div>
              <div className="expense-list-item-desc"> {item.owner.fullName} {new Date(item.createdDate).format('yyyy-MM-dd')}</div>
            </div>
          ))
        }
      </section>
    );
  }
}

ExpenseList.propTypes = {};

export default ExpenseList;
